<!doctype html>
<html>
<head>
    <title>同城微聚汇客服功能网页版</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/admin.css">
    <link rel="stylesheet" href="http://s.workerman.net/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="http://s.workerman.net/layui/css/modules/layer/default/layer.css?v=3.0.3303" media="all">
    <link rel="stylesheet" href="http://s.workerman.net/layui/css/modules/layim/layim.css?v=3.54Pro" media="all">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_1lu20y88flayvi.css" media="all">
    <script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.2.min.js"></script>
    <script src='//cdn.bootcss.com/socket.io/1.3.7/socket.io.js'></script>
<style>
.new_m{background: #FEC044;}
.active{background: #F8F8F8;z-index: 100!important;}
.chat-cont-li{position: relative; z-index: 99}
.wait_re{font-weight: bold;}
.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
#facebox{border-right:1px solid #eee;border-top:1px solid #eee;}
#facebox table tr td{border-left:1px solid #eee;border-bottom:1px solid #eee;background: #fff}
.kefu{text-align: right}
.kefu .layim-chat-user{right:3px;}
.kefu .layim-chat-user cite{text-align: right;width:100%;left:-60px;}
.kefu .layim-chat-user cite i{margin-right:10px;}
.kefu .layim-chat-text{margin-right:60px;}
.kefu .layim-chat-text::after {
    right: -10px!important;
    left:auto;
}
</style>
</head>
<body>
<div id="online_box">111</div>
<div class="main_content">
    <div class="main_header">
        <div class="tab">
            <div class="tab_item tab_item_selected" data-target="1"><span class="wait_re">0</span>人待回复</div>
            <div class="tab_item" data-target="2">历史聊天</div>
        </div>
    </div>
    <div class="main_body">
        <div class="chat_wrap" >
            <div class="panel" data="1">
                <div class="scroll-wrapper scrollbar-macosx" style="position: relative; height: 100%;"><div class="scrollbar-macosx scroll-content" style="height: 557px; margin-bottom: -17px; margin-right: -17px; max-height: none;overflow:scroll;">
                </div>
                </div>
            </div>
            <div class="panel" data="2" style="display:none">
                <div class="scroll-wrapper scrollbar-macosx" style="position: relative; height: 100%;"><div class="scrollbar-macosx scroll-precontent" style="height: 557px; margin-bottom: -17px; margin-right: -17px; max-height: none;overflow:scroll;">
                  <volist name="chatusers" id="vo">
                  <div class="chat-li active" data-target="{$vo.from_uid}"><img class="layim-friend gray" src="{$vo.head_pic}" style="width:40px;height:40px"><span class="layim-chat-username">{$vo.nickname|shownickname=###}</span><p class="layim-chat-status"></p></div>
                  </volist>
                </div>
                </div>
            </div>
            <div class="chatbox chat" data-box="1">
               <div id="no-mesg" class="nomessage" style="margin:0;height:100%;width:100%;display:flex;align-items:center"><span style="display:block;width:100%;text-align:center;color:#ccc">还没有聊天消息</span></div>
                  
            </div>
            <div class="chat_detail" style="display:none"><div class="layui-layer-title" style="cursor: move;">​聊天记录</div><div class="layim-chat-main" style="height:442px"><ul></ul></div><div class="chat_detail_foot"><i class="iconfont icon-zuihyy115" data="-1"></i><i class="layui-icon" data="pre">&#xe603;</i><i class="layui-icon" data="next">&#xe602;</i><i class="iconfont icon-lastPage" data="1"></i></div></div>
        </div>
    </div>
</div>
<div class="chat-temp" style="display:none">
  <div class="layui-layer-title" style="cursor: move;">​</div><div id="layui-layim-chat" class="layui-layer-content"><div class="layim-chat-box"><div class="layim-chat layim-chat-friend layui-show"><div class="layui-unselect layim-chat-title" style="top:-51px"><div class="layim-chat-other" style="top: 9px;"><p class="layim-chat-status"></p></div></div><div class="layim-chat-main" style="height:319px"><ul></ul></div><div class="layim-chat-footer"><div class="layui-unselect layim-chat-tool"><span class="layui-icon layim-tool-face emotion" title="选择表情" layim-event="face"></span><span class="layui-icon layim-tool-image" title="上传图片" layim-event="image"><input name="file" type="file"></span><span class="layui-icon layim-tool-image" title="发送文件" layim-event="image" data-type="file"><input name="file" type="file"></span><span class="layim-tool-log" layim-event="chatLog"><i class="layui-icon"></i>聊天记录</span></div><div class="layim-chat-textarea"><textarea id="saytext" name="saytext"></textarea></div><div class="layim-chat-bottom"><div class="layim-chat-send"><span class="layim-send-close" layim-event="closeThisChat">关闭</span><span class="layim-send-btn" layim-event="send">发送</span><span class="layim-send-set" layim-event="setSend" lay-type="show"><em class="layui-edge"></em></span><ul class="layui-anim layim-menu-box"><li class="layim-this" layim-event="setSend" lay-type="Enter"><i class="layui-icon"></i>按Enter键发送消息</li><li layim-event="setSend" lay-type="Ctrl+Enter"><i class="layui-icon"></i>按Ctrl+Enter键发送消息</li></ul></div></div></div></div></div></div><span class="layui-layer-setwin"><a class="layui-layer-min" href="javascript:;"><cite></cite></a><a class="layui-layer-ico layui-layer-max" href="javascript:;"></a><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;" onclick="close_kf(this)"></a></span><span class="layui-layer-resize"></span>
</div>
<script type="text/javascript" src="__STATIC__/js/jquery.qqFace.js"></script>
<script>
$('.main_header .tab_item').click(function(){
    var data=$(this).attr('data-target');
    $('.chat_wrap').find('.panel').css('display','none');
    $('.chat_wrap').find('[data="'+data+'"]').css('display','block');
    $('.main_header .tab_item').removeClass('tab_item_selected');
    $(this).addClass('tab_item_selected');
})
</script>
<script>
var mess_id=0;
var to_uid='';
var from_uid='{$kefu.kf_no}';
var kf=JSON.parse('{$kefuinfo}');
$(document).ready(function () {
      // 连接服务端
      var socket = io('http://'+document.domain+':2120');
      // 连接后登录
      socket.on('connect', function(){
        socket.emit('login', from_uid);
        alert('登录成功');
      });

      // 后端推送来消息时
      socket.on('new_msg', function(msg){
            var obj=JSON.parse(msg);
            add_msg(obj);
           
      });
        // 后端推送来在线数据时
        socket.on('update_online_count', function(online_stat){
            $('#online_box').html(online_stat);
        });
        //后端推送用户下线状态
        socket.on('on_user_offline', function(status){
            var obj=JSON.parse(status);
            for(var i=0;i<obj.length;i++){
              $('[data-target="'+obj[i]+'"]').children('img').addClass('gray');
            }
            
        });

        //后端推送用户上线状态
        socket.on('on_user_online', function(status){
            var obj=JSON.parse(status);
            for(var i=0;i<obj.length;i++){
              $('[data-target="'+obj[i]+'"]').children('img').removeClass('gray');
            }
        });
        // 上线时推送留言消息
        socket.on('off_mes_kefu', function(wait_re){
            $.post('{:U("Webchat/get_kefu_re_message")}',{re_list:wait_re,msg_type:2,from_uid:from_uid},function(res){
              var obj=JSON.parse(res);
              for(var i=0;i<obj.length;i++){
                add_msg(obj[i]);
              }
            })
        });

        $('.scroll-content').on('click','.chat-li',function(){
            var dataid=$(this).attr('data-target');
            $('.scroll-content .chat-li').removeClass('active');
            $(this).removeClass('new_m');
            $(this).addClass('active');
            $('.chat .chat-cont-li').css('display','none');
            $('[target-box="'+dataid+'"]').css('display','block');
        });
        $('.scroll-precontent').on('click','.chat-li',function(){
            var dataid=$(this).attr('data-target');
            $('.scroll-content .chat-li').removeClass('active');
            $(this).removeClass('new_m');
            $(this).addClass('active');
            $('.chat .chat-cont-li').css('display','none');
            $('.chat').find('[target-box="'+dataid+'"]').css('display','block');

            $.get('{:U("Admin/index")}',{user_id:dataid,p:-1,type:'get_chat_list'},function(res){
               loading_msg(res);
            })
            
        });

  });
function add_msg(obj){
    var is_esit=$('[target-box="'+obj.from+'"]').html();
    var cls=$('#no-mesg').attr('class');
    if(is_esit==""||is_esit==undefined){
      var tempstr=$('.chat-temp').html();
      if(cls=="nomessage"){
        $('.chat').html('')
      }
      var htmstr='<div class="chat-cont-li" target-box="'+obj.from+'">'+tempstr+'</div>';
      $('.chat .chat-cont-li').css('display','none');
      $('.chat').append(htmstr);

      $('.scroll-content').append('<div class="chat-li" data-target="'+obj.from+'"><img class="layim-friend" src="'+obj.head_pic+'" style="width:40px;height:40px"><span class="layim-chat-username">'+obj.nickname+'</span><p class="layim-chat-status"></p></div>');
      $('.scroll-precontent').find('[data-target="'+obj.from+'"]').remove();
      show_chat_detail();
    }
    var chat_main=$('[target-box="'+obj.from+'"]').find('.layim-chat-main');
    chat_main.find('ul').append('<li><div class="layim-chat-user"><img src="'+obj.head_pic+'"><cite>'+obj.nickname+'<i>'+obj.time+'</i></cite></div><div class="layim-chat-text">'+replace_em(obj.content)+'</div></li>');
    $('.scroll-content').find('[data-target="'+obj.from+'"]').addClass('new_m wait_resg');
    chat_main.scrollTop(chat_main[0].scrollHeight);
    $('.emotion').qqFace({
      id : 'facebox', //表情盒子的ID
      assign:'saytext', //给那个控件赋值
      path:'__STATIC__/face/'  //表情存放的路径
    });
    //统计待回复
    $('.wait_re').text($('.wait_resg').length);
    
}
function loading_msg(res){
    var ress=JSON.parse(res);
    var user_id=ress.users.user_id;

    var is_esit=$('[target-box="'+user_id+'"]').html();
    var cls=$('#no-mesg').attr('class');
    if(is_esit==""||is_esit==undefined){
      var tempstr=$('.chat-temp').html();
      if(cls=="nomessage"){
        $('.chat').html('')
      }
      var htmstr='<div class="chat-cont-li" target-box="'+user_id+'">'+tempstr+'</div>';
      $('.chat .chat-cont-li').css('display','none');
      $('.chat').append(htmstr);
    }
    var chat_main=$('[target-box="'+user_id+'"]').find('.layim-chat-main');
    var obj=ress.chatlist;
    var users=ress.users;
    for (var i = 0; i < obj.length; i++) {
      var htmlstr="";
      if(obj[i].from_uid.indexOf('kefu')>-1){
        var classname="kefu";
        var kf_no=obj[i].from_uid;
      }else{
        var classname="self";
      }
      

        htmlstr+='<li class="'+classname+'"><div class="layim-chat-user">';
      if(obj[i].from_uid.indexOf('kefu')>-1){
        htmlstr+='<img src="'+kf[kf_no].kf_headpic+'"><cite><i>'+timetrans(obj[i].time)+'</i>'+kf[kf_no].kf_name+'</cite>';
      }else{
        htmlstr+='<img src="'+users.head_pic+'"><cite>'+users.nickname+'<i>'+timetrans(obj[i].time)+'</i></cite>';
      }
      
        htmlstr+='</div><div class="layim-chat-text">'+replace_em(obj[i].message)+'</div></li>';
        chat_main.find('ul').prepend(htmlstr);
    }
   
    chat_main.scrollTop(chat_main[0].scrollHeight);
    show_chat_detail();
}
function show_chat_detail(){
    $('.layim-tool-log').click(function(){
        var uid=$(this).parents('.chat-cont-li').attr('target-box');
        var show=$('.chat_detail').css('display');
        if(show=="none"){
          $('.chat_detail').css('display','block');
          $('.chat_detail').attr('data-target',uid);
          ajax_page(uid);
        }else{
          $('.chat_detail').css('display','none');
        }
    })
}
var p=-1;
var total_page=0;
function ajax_page(uid){
  if(p>0||p==-1){
   $.get('{:U("Admin/index")}',{user_id:uid,p:p,type:'get_chat_list'},function(res){
          var obj=JSON.parse(res);
          loading_mesg(obj.chatlist,obj.users);
          p=obj.page;
          total_page=obj.total_page;
   })
 }
}


$('.chat_detail_foot i').click(function(){
    var uid=$('.chat_detail').attr('data-target');
    var data=$(this).attr('data');
    if(data=='-1'){
      p=-1;
      ajax_page(uid);
    }
    if(data=='1'){
      p=1;
      ajax_page(uid);
    }
    if(data=='pre'){
      p--;
      if(p>0){
        ajax_page(uid);
      }else{
        $('[data="pre"]').css('color','#999')
      }
      
    }
    if(data=='next'){
      p++;
      if(p<=total_page){
        ajax_page(uid);
      }else{
        $('[data="next"]').css('color','#999')
      }
    }
})
function loading_mesg(obj,users){
   $('.chat_detail').find('ul').html('');
    for(var i=0;i<obj.length;i++){
      var htmlstr="";
      if(obj[i].from_uid.indexOf('kefu')>-1){
        var classname="kefu";
        var kf_no=obj[i].from_uid;
      }else{
        var classname="self";
      }
      

        htmlstr+='<li class="'+classname+'"><div class="layim-chat-user">';
      if(obj[i].from_uid.indexOf('kefu')>-1){
        htmlstr+='<img src="'+kf[kf_no].kf_headpic+'"><cite><i>'+timetrans(obj[i].time)+'</i>'+kf[kf_no].kf_name+'</cite>';
      }else{
        htmlstr+='<img src="'+users.head_pic+'"><cite>'+users.nickname+'<i>'+timetrans(obj[i].time)+'</i></cite>';
      }
      
        htmlstr+='</div><div class="layim-chat-text">'+replace_em(obj[i].message)+'</div></li>';
      $('.chat_detail').find('ul').prepend(htmlstr);

    }
}

function replace_em(str){ 
    str = str.replace(/\</g,'<；'); 
    str = str.replace(/\>/g,'>；'); 
    str = str.replace(/\n/g,'<；br/>；'); 
    str = str.replace(/\[em_([0-9]*)\]/g,'<img src="__STATIC__/face/$1.gif" border="0" />'); 
    return str; 
} 
function myTrim(x) {
    return x.replace(/^\s+|\s+$/gm,'');
}

  $('.chat').on('click','.layim-send-btn',function(){
    var dt=$(this).parents('.chat-cont-li')
    var chat_main=dt.find('.layim-chat-main');
    var content=dt.find('.layim-chat-textarea textarea').val();
    var show_cont=replace_em(content);
    if(myTrim(content)=="") return false;
    var time=getNowFormatDate();
    var to_uid=dt.attr('target-box');
    mess_id++;
    chat_main.find('ul').append('<li class="kefu" temp="'+mess_id+'"><div class="layim-chat-user"><img src="{$kefu.kf_headpic}"><cite>{$kefu.kf_name}<i>'+time+'</i></cite></div><div class="layim-chat-text">'+show_cont+'</div></li>');
    chat_main.scrollTop($('.layim-chat-main').scrollHeight);
    dt.find('.layim-chat-textarea textarea').val('');

    $.post('{:U("Webchat/send_message")}',{msg_type:2,to:to_uid,content:content,from:from_uid,nickname:"{$kefu.kf_name}",head_pic:'{$kefu.kf_headpic}',time:time},function(res){
        var obj=JSON.parse(res);
        if(obj.status!="ok"){
            $('[temp="'+mess_id+'"]').find('.iconfont').text('!');
            return false;
        }
        $('[data-target="'+to_uid+'"]').removeClass('wait_resg');
        $('.wait_re').text($('.wait_resg').length);
    })
  })

  $('.chat').on('keydown','textarea',function(event){
      if (event.keyCode == 13) {    
             $(this).parents('.layim-chat-footer').find('.layim-send-btn').trigger('click');
             return false;
         }    
  })

function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
    return currentdate;
} 
function timetrans(date){
    var date = new Date(date*1000);//如果date为10位不需要乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
    return Y+M+D+h+m+s;
}

//关闭当前聊天窗口
  $('body').on('click','.layui-layer-close',function(){
      var data=$(this).parents('.chat-cont-li').attr('target-box');
      $('[data-target="'+data+'"],[target-box="'+data+'"]').remove();
  })
  

</script>
</body>
</html>